
<template>
  <div>
    <MyTable
      v-model="params"
      v-loading="loading"
      is-right
      :total="total"
      :list="list"
      :arr="arr"
      :title="title"
      @search="searchFn"
      @input="jumpFn"
      @mondify="mondifyFn"
      @add="addFn"
      @stop="stopFn"
      @del="delFn"
    />
  </div>
</template>
<script>
import { getLocationDetail, mondifyArea, delArea } from '@/api'
export default {
  data() {
    return {
      loading: false,
      total: 0,
      title: ['库区名称 ', '库位名称', '库位状态'],
      params: {
        size: 10,
        areaName: '',
        name: '',
        status: '',
        current: 1
      },
      list: [],
      arr: ['所属仓库', '库区编号', '库区名称 ', '库位编号', '库位名称', '温度类型', '承重类型', '用途属性', '停用状态', '承载上限', '更新时间'],
      temperatureType: { // 温度类型
        CW: '常温',
        LC: '冷藏',
        HW: '恒温'
      },
      bearingType: { // 承重类型
        ZX: '重型',
        QX: '轻型',
        BX: '中型'
      },
      useType: { // 用途属性
        RKHCQ: '入库缓存区',
        CKHCQ: '出库缓存区',
        CCQ: '存储区',
        FJQ: '分拣区',
        ZJQ: '质检区'
      },
      status: {
        0: '禁用',
        1: '启用'
      }
    }
  },
  async created() {
    this.fetchWareHouseList()
  },
  methods: {
    async fetchWareHouseList(val) {
      this.loading = true
      let res = null
      if (!val) {
        res = await getLocationDetail({
          size: this.params.size,
          current: this.params.current
        })
      } else {
        res = await getLocationDetail(val)
      }
      this.list = res.data.records.map(item => {
        item.temperatureType = this.temperatureType[item.temperatureType]
        item.bearingType = this.bearingType[item.bearingType]
        item.useType = this.useType[item.useType]
        item.status = this.status[item.status]
        return item
      })
      this.params.current = +res.data.current
      this.total = +res.data.total
      this.loading = false
    },
    async searchFn(val) {
      const obj = {}
      obj.size = this.params.size
      obj.current = this.params.current
      obj.areaName = val.one
      obj.name = val.two
      val.status && (obj.status = val.three)
      this.fetchWareHouseList(obj)
    },
    jumpFn(val) {
      this.params = {
        size: val.size,
        current: val.current
      }
      this.fetchWareHouseList()
    },
    addFn() {
      this.$router.push({ name: 'locationDetail' })
    },
    async mondifyFn(val) {
      this.$router.push({
        path: 'location/detail',
        query: {
          id: val.id
        }
      })
    },
    stopFn(val) {
      const title = val.status
      const status = val.status === '启用' ? '0' : '1'
      this.$confirm(`确定要${title}:${val.name}吗？`, `确认${title}`, {
        cancelButtonText: '取消',
        confirmButtonText: '确认'
      }).then(async() => {
        await mondifyArea({ id: val.id,
          status
        })
        this.$message.success('状态改变成功')
        // 重新渲染页面
        this.fetchWareHouseList()
      }).catch()
    },
    delFn(val) {
      this.$confirm('确认要删除吗？', '温馨提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(async() => {
        await delArea(val.id)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
